<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<link rel="stylesheet" type="text/css" href="../c/swiper.min.css" />
	<style>
		html,
		body {
			height: 100%;
		}

		body {
			background: transparent !important;
			/*background: #fff !important;*/
		}

		.t {
			z-index: 0;
			width: 100%;
			height: 100%;
		}

		.f {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: auto;
			overflow: hidden;
			background: #201A17 !important;
			z-index: 9;
			border-top-left-radius: 1rem;
			border-top-right-radius: 1rem;
			padding-bottom: 3rem;
			/*height: 25rem;*/
		}

		.swiper-container {
			width: 100%;
			height: 100%;
			padding: 0.7rem;
			/*height: 15rem;*/
		}

		.swiper-slide {
			padding: 0 0.5rem;
			text-align: center;
			color: #fff;
			width: 5rem;
			height: 1005；
		}

		.swiper-slide p {
			color: #fff;
			font-size: 0.65rem;
			padding-top: 0rem;
		}

		.swiper-slide span {
			color: #999999;
			font-size: 0.55rem;
			display: inline-block;
		}

		.swiper-slide img {
			width: 5rem;
			height: 3.2rem;
		}

		.swiper-pagination {
			text-align: right;
			right: 0rem;
			padding-right: 0.75rem;
		}

		.swiper-pagination-bullet {
			background: #fff;
			margin: 0 0.1rem;
		}

		.swiper-pagination-bullet-active {
			background: #D43D3D;
		}

		.text {
			position: absolute;
			color: #fff;
			-webkit-transition: .3s opacity;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			z-index: 11;
			padding-left: 0.75rem;
			font-size: 0.75rem;
			margin-top: 0.5rem;
		}

		.text span {
			padding-right: 1rem;
		}

		.text .b2 {}

		.text .b3 {
			color: #F95555;
			font-weight: bold;
			padding-right: 0;
		}
	</style>
</head>

<body>
	<div class="t" tapmode onclick="c()"></div>
	<div class="f" id="sx-view">
		<div id="loadingdi_huifu" style="margin:5.5rem auto;"><img src="../i/footer_progress.png" /></div>
	</div>
	<script id="sx-list" type="text/x-dot-template">
		<div class="swiper-container" >
			<div class="swiper-wrapper">
				{{ for(var i=0,len=it.length; i
					< len; i++) { }} <div class="swiper-slide" tapmode onclick="liwu_money(this)" data-data='{{= JSON.stringify(it[i]) }}'>
						<img suxiangw-src="{{= _sx_qiniu + (it[i].img) }}?imageView2/1/w/100/format/png" src="../i/loading_200.png" />
						<p>{{= it[i].title}}</p>
						<span>{{= it[i].money + _getPrefs('_config').zhibo.liwu_name}}</span>
				</div>
				{{ } }}
			</div>
		</div>
		<div class="swiper-pagination"></div>
		<div class="text" tapmode onclick="chongzhi()">
			<span class="b2">{{= _getPrefs('_config').zhibo.liwu_name}}：<b>{{= _user.zhibo_zuan ? _user.zhibo_zuan : 0}}</b></span>
			<span class="b3">充值</span>
		</div>
	</script>

</body>
<script type="text/javascript" src="../j/api.js"></script>
<script type="text/javascript" src="../j/swiper.min.js"></script>
<script type="text/javascript">
	apiready = function() {
		_user = _getPrefs('_user');
		a()
		api.parseTapmode();
		api.addEventListener({
				name: 'zhibo_view_frm_liwu'
		}, function(ret, err) {
				if(ret.value.hide){
					api.closeFrame();
				}
		});
	}

	function a() {
		//	console.log(JSON.stringify(api.pageParam))
		var ret = _getPrefs('_config').liwu
		var evalData = doT.template($api.html($api.byId('sx-list')));
		$api.html($api.byId('sx-view'), evalData(ret));
		api.parseTapmode();
		_imageCache()
			//console.log(evalData(ret))
		var swiper = new Swiper('.swiper-container', {
			slidesPerView: 4,
			spaceBetween: 15,
			slidesPerGroup: 4,
			slidesPerColumn: 2,
			loopFillGroupWithBlank: true,
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
		});
	}

	function c() {
		api.closeFrame();
	}

	function chongzhi() {
		api.setFullScreen({
			fullScreen : false
		});
		_url({
			url: 'zhibo_view_frm_chongzhi',
			title: '充值'
		})
	}
	// 发送礼物
	function liwu_money(_this) {
		var data = $(_this).data('data');
		if (api.pageParam && api.pageParam['ret'] && api.pageParam['ret']['role'] == 2) {
			return _msg('不能给自己送礼物1');
		}
		// 检测钻石是否足够
		if (!_getPrefs('_user').id || _getPrefs('_user').zhibo_zuan < data.money) {
			return _msg(_getPrefs('_config').zhibo.liwu_name+'不足');
		}
		if (_getPrefs('_user').id == api.pageParam['uid']) {
			return _msg('不能给自己送礼物2');
		}
		if(api.pageParam['_name'] == 'video'){
			api.execScript({
					script: '_dashang('+data.id+','+api.pageParam['vid']+',"'+data.img+'");'
			});
		}else{
			api.execScript({
				frameName: 'zhibo_view_frm_1',
				script: 'liwu_ajax(\'' + JSON.stringify(data) + '\');'
			});
		}
		return c();
		_ajax('zhibo/liwu_money', function(ret, err) {
			if (ret) {
				if (ret.ret) {
					_msg('赠送成功');
					_user.zhibo_zuan = _user.zhibo_zuan - ret.money;
					$('.text .b2').html(_getPrefs('_config').zhibo.liwu_name + "：<b>" + (_user.zhibo_zuan ? _user.zhibo_zuan : 0) + "</b>")
					api.execScript({
						script: '_userInfo();'
					});
					c();
				}
				console.log(JSON.stringify(ret))
			} else {
				_alert(JSON.stringify(err))
			}
		}, {
			id: id,
			uid_zhu: api.pageParam['uid']
		})
	}
</script>

</html>
